<template>
  <!-- 附加被保人 -->
  <insureTitle title="附加被保人" @copyProfile="copyProfile"></insureTitle>
  <div class="text-[14px]">
    <div v-for="(item, parentIndex) in list" class=" ">
      <div class="flex items-center justify-between pt-[15px] px-[15px]">
        <div class="flex items-center">
          <div>附加被保人类型</div>
          <div class="flex" v-if="edit">
            <div class="flex items-center ml-[25px]" @click="tabsChange(parentIndex, 1)">
              <div class="flex items-center">
                <img :src="item.type == 1
                  ? getAssetsFile('insure/active.png')
                  : getAssetsFile('insure/noactive.png')
                  " class="w-[14px] h-[14px]" />

                <div class="ml-[10px]">单位</div>
              </div>
            </div>
            <div class="flex items-center ml-[25px]" @click="tabsChange(parentIndex, 2)">
              <div class="flex items-center">
                <img :src="item.type == 2
                  ? getAssetsFile('insure/active.png')
                  : getAssetsFile('insure/noactive.png')
                  " class="w-[14px] h-[14px]" />

                <div class="ml-[10px]">个人</div>
              </div>
            </div>
          </div>
          <div v-else>
            <div class="flex items-center ml-[25px]">
              <div class="flex items-center">
                <img :src="getAssetsFile('insure/disbale.png')" class="w-[14px] h-[14px]" />

                <div class="ml-[10px]">
                  {{ item.type == 1 ? "单位" : "个人" }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div @click="del(parentIndex)" v-if="parentIndex > 0"
          class="w-[46px] h-[26px] flex items-center justify-center border border-[#9A9A9A] rounded-[3px] text-[#9A9A9A]">
          删除
        </div>
      </div>
      <div class="pt-[25px] px-[15px]">
        <div class="flex w-full flex-col">
          <div class="flex items-center w-full border-b border-[#ECECEC] pb-[15px]">
            <div class="text-[14px] min-w-[100px]">附加被保人性质</div>
            <div class="ml-[10px] flex justify-between items-center w-full"
              @click="openPop('附加被保人性质', item, parentIndex)">
              <div class="text-[#c8c9cc]">
                {{ item.nature ? item.nature : "请选择附近被保人性质" }}
              </div>
              <div><van-icon name="arrow" /></div>
            </div>
          </div>
          <div class="border-b border-[#ECECEC] py-[15px] relative">
            <van-field label-class="label" :label="item.type == 1 ? '单位名称' : '姓名'" :disabled="!edit" v-model="item.name"
              placeholder="请输入姓名" :rules="[{ required: true, message: '请输入姓名' }]" @blur="inputBlur($event, item)" />

          </div>
          <div class="flex items-center w-full border-b border-[#ECECEC] py-[15px]">
            <div class="text-[14px] min-w-[100px]">证件类型</div>
            <div class="ml-[10px] flex justify-between items-center w-full" @click="openPop('证件类型', item, parentIndex)">
              <div>
                {{ item.card_type ? item.card_type : "请选择证件类型" }}
              </div>
              <div><van-icon name="arrow" /></div>
            </div>
          </div>
          <div class="py-[15px]">
            <van-field label-class="label" :disabled="!edit" v-model="item.card_no" label="证件号码" placeholder="请输入证件号码"
              :rules="[{ required: true, message: '请输入证件号码' }]" />
          </div>
        </div>
      </div>
      <div class="w-full h-[15px] bg-[#FCFCFC]" v-if="list.length > 1"></div>
    </div>
    <div class="bg-[#FCFCFC] pt-[20px] flex justify-center w-full" v-if="edit">
      <div @click="add"
        class="h-[30px] flex items-center justify-center border border-[#EF6800] rounded-[3px] text-[#EF6800] px-[5px]">
        添加附加被保人
      </div>
    </div>
  </div>
  <div>
    <van-popup v-model:show="show" position="bottom" :style="{ height: '40%' }">
      <van-picker :title="popTitle" :columns="columns" :columns-field-names="{ text: 'label' }" @confirm="onConfirm"
        @cancel="show = false" />
    </van-popup>
  </div>
</template>
<script setup lang="ts">
import getAssetsFile from "@/utils/getImageurl";
import insureTitle from "./insureTitle.vue";
import { getBusinessInfo } from "@/utils/api";
import { ref, defineProps, defineExpose, watchEffect, defineEmits } from "vue";
import { useRoute } from "vue-router";
const props = defineProps({
  Info: { type: Object },
  edit: { type: Boolean },
  param: { type: Object }
});
const emit = defineEmits(['setParam'])
const param = ref({}) as any
const route = useRoute();
const show = ref(false);
const columns = ref<Object[]>([]);
// const nameList = ref([]) as any
const list = ref<Array<insuredType>>([
  {
    card_no: "",
    card_type: "统一社会信用代码",
    name: "",
    nature: "",
    type: 1, //1是单位 2是个人
    show: 0
  },
]);

const index = ref(0);

const popTitle = ref("");
const type = ref<string | number>(""); //1是附加被保人性质 2是证件类型
const inputBlur = async (_: any, item: any) => {
  if (item.type == 1) {
    const res = await getBusinessInfo({ name: item.name });
    if (res.code == 1) {
      item.card_no = res.msg.card_no;
    }
  }
}
// const inputChange = async (v: any, item: any) => {
//   if (item.type == 1) {
//     const res = await getBusiness({ name: v });
//     nameList.value = res.msg;
//     item.show = 1;
//     // nameShow.value = true;
//   }
// };
// const clickName = (items: any, item: any) => {
//   item.name = items.companyName;
//   item.card_no = items.creditNo;
//   item.show = 0;
//   // nameShow.value = false;
// };
const tabsChange = (parentindex: number, val: number) => {
  list.value.forEach((item: any, i: number) => {
    if (parentindex == i) {
      item.type = val;
      item.nature = "";

      item.card_no = '';
      item.name = ''
      if (val == 1) {
        item.card_type = '统一社会信用代码'
      } else {
        item.card_type = '身份证'
      }
    }
  });
};

const onConfirm = (v: any) => {
  //index
  list.value.forEach((item: any, i: number) => {
    if (i == index.value) {
      if (popTitle.value == "附加被保人性质") {
        item.nature = v.selectedValues[0];
      } else {
        item.card_type = v.selectedValues[0];
      }
    }
  });

  show.value = false;
};
//打卡弹窗
const openPop = (title: string, item: any, i: number) => {
  if (!props.edit) return;
  index.value = i;
  popTitle.value = title;
  columns.value = [];
  if (popTitle.value == "附加被保人性质") {
    xzFun();
  } else if (popTitle.value == "证件类型") {
    if (item.type == 1) {
      //个人
      grFun();
    } else {
      //单位
      dwFun();
    }
  }
  type.value = title;
  show.value = true;
};
//附近被保人性质数组获取
const xzFun = () => {
  if (route.query.order_id) {
    props?.Info?.bx_info?.nature.forEach((item: any) => {
      let param = {
        label: item,
        value: item,
      };
      columns.value.push(param);
    });
  } else {
    props?.Info?.nature.forEach((item: any) => {
      let param = {
        label: item,
        value: item,
      };
      columns.value.push(param);
    });
  }
};
//个人证件类型的获取
const grFun = () => {
  if (route.query.order_id) {
    props?.Info?.bx_info?.cardTypeOne.forEach((item: any) => {
      let param = {
        label: item,
        value: item,
      };
      columns.value.push(param);
    });
  } else {
    props?.Info?.cardTypeOne.forEach((item: any) => {
      let param = {
        label: item,
        value: item,
      };
      columns.value.push(param);
    });
  }
};
//单位证件类型的获取
const dwFun = () => {
  if (route.query.order_id) {
    props?.Info?.bx_info?.cardTypeTwo.forEach((item: any) => {
      let param = {
        label: item,
        value: item,
      };
      columns.value.push(param);
    });
  } else {
    props?.Info?.cardTypeTwo.forEach((item: any) => {
      let param = {
        label: item,
        value: item,
      };
      columns.value.push(param);
    });
  }
};
//添加被保人
const add = () => {
  let arr = JSON.parse(
    JSON.stringify({
      card_no: "",
      card_type: "统一社会信用代码",
      name: "",
      nature: "",
      type: 1, //1是单位 2是个人
      show: 0
    })
  );
  list.value.push(arr);
};
//同投保人
const copyProfile = () => {
  emit('setParam')
  let insure = {} as any
  insure = param.value.insure;
  if (insure.insure_type == '单位') {
    list.value[0].type = 1;
    list.value[0].card_type = '统一社会信用代码'
  } else {
    list.value[0].type = 2;
    list.value[0].card_type = '身份证'
  }
  list.value[0].card_no = insure.card_no;
  list.value[0].name = insure.name;
}
const del = (parentIndex: number) => {
  list.value.splice(parentIndex, 1);
};
watchEffect(() => {
  if (props?.Info?.insured !== undefined) {
    list.value = props?.Info?.insured;
  }
  if (props.param) {
    param.value = props.param
  }
});
defineExpose({
  list,
});
</script>
<style scoped lang="scss">
:deep(.van-cell) {
  padding: 0 !important;
  font-size: 14px !important;
}

:deep(input.van-field__control::-webkit-input-placeholder) {
  color: #c8c9cc;
}

:deep(.label) {
  color: black !important;
}
</style>
